<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <!-- 子传父  自定义事件 -->
   <TodoHeader @addtodo="hadd" @selected="check" :list="list" />
   <TodoMain :list="newList" @del="hdel"/>
   <TodoFooter  @del='Tdel' :list="newList" @changeSel="changeSelhde" />
  </section>
</template>

<script>
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

import "./styles/base.css"
import "./styles/index.css"
import { now } from 'moment';
export default {
  data() {
    return {
       list:JSON.parse(localStorage.getItem('list'))|| [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    isSet:'all'
    }
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  methods: {
    hadd(name){
      // 接收子组件的数据
      this.list.push({ id:Date.now() , name, isDone: false },)
    },
    hdel(idx){
      this.list.splice(idx,1)
    },
    Tdel(){
     this.list = this.list.filter(item=>!item.isDone)
    },
    check(float){
        this.list.forEach(item => item.isDone = float);
    },
    changeSelhde(isSet){
      //  console.log(isSet)
      this.isSet = isSet
    }
  },
  computed:{
    newList(){
     if(this.isSet === 'on'){
        return this.list.filter(item=>!item.isDone)
     }else if(this.isSet === 'yes'){
        return this.list.filter(item=>item.isDone)
    }else{
        return this.list
     }
  },

  },
  watch:{
    list:{
      deep:true,
       handler(newVal){
      return  localStorage.setItem('list',JSON.stringify(newVal))
     }
    }
  }
};
</script> 